<!DOCTYPE html>
<html lang="en" style="height:100%">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>设置资产密码</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/style.css" />
    <link rel="stylesheet" type="text/css" href="../../css/yzl.css" />
    <link rel="stylesheet" type="text/css" href="../../css/vant.css" />
    <!-- <link rel="stylesheet" href="../../css/BarlowCondensed-Bold.woff.ttf" /> -->
    <!-- <link rel="stylesheet" href="../../css/sqc.css"> -->
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        input{

            outline:none;
        }
        .next{
            background-color: transparent;
            background-image: url("../../image/lan-juxing.png");
            background-size: cover;
        }

    </style>
</head>

<body style="background: #fff;">
<div id="blank" class="header" v-cloak style="border-bottom: 1px solid #f7f4f2;">
    <div v-back.tapmode class="back"></div>
    <div class="title">设置资产密码</div>
</div>
<div id="app"  v-cloak style="padding-top:60px;">
  <div class="give-number bind-exchange" v-if="step==0">
      <div class="give-number-title" style="text-align: center;font-size: 15px;margin-bottom: 48px;font-weight: normal">我们将会向{{user.inviteCode}}发送一条验证码</div>
      <div class="input-center input-text" >
				<input class="input" type="tel"  maxlength="6" placeholder="请输入短信验证码"  v-model="verify_code" />
				<sendcodepd :phone="phone" type="8"  style="position:absolute;right:0px;top:1rem">
				</sendcodepd>
			</div>
      <div class="regrist-button next" v-myclick="next_step" :class="{'regrist-button-active':verify_code}" style="margin-bottom:24px;margin-top: 94px;width: 100%;">下一步</div>
  </div>
    <div class="give-number bind-exchange" v-if="step==1">
        <div class="give-number-title" style="text-align: center;font-size: 15px;margin-bottom: 48px;font-weight: normal">设置资产密码</div>
        <div id="payPwd">
            <input ref="pwd" type="password" maxlength="6" v-model="msg"  style="position: absolute;z-index: -1;left:-100%;opacity: 0"/>
            <ul class="pwd-wrap" @click="focus">
                <li :class="msg.length == 0?'psd-blink':''"><i v-if="msg.length > 0"></i></li>
                <li :class="msg.length == 1?'psd-blink':''"><i v-if="msg.length > 1"></i></li>
                <li :class="msg.length == 2?'psd-blink':''"><i v-if="msg.length > 2"></i></li>
                <li :class="msg.length == 3?'psd-blink':''"><i v-if="msg.length > 3"></i></li>
                <li :class="msg.length == 4?'psd-blink':''"><i v-if="msg.length > 4"></i></li>
                <li :class="msg.length == 5?'psd-blink':''"><i v-if="msg.length > 5"></i></li>
            </ul>
        </div>
        <div class="regrist-button next" v-myclick="next_step" :class="{'regrist-button-active':msg}" style="margin-bottom:24px;margin-top: 94px;width: 100%;">下一步</div>
    </div>
    <div class="give-number bind-exchange" v-if="step==2">
        <div class="give-number-title" style="text-align: center;font-size: 15px;margin-bottom: 48px;font-weight: normal">请再次输入密码</div>
        <div id="payPwd">
            <input ref="rpwd" type="password" maxlength="6" v-model="rmsg"  style="position: absolute;z-index: -1;left:-100%;opacity: 0"/>
            <ul class="pwd-wrap" @click="rfocus">
                <li :class="rmsg.length == 0?'psd-blink':''"><i v-if="rmsg.length > 0"></i></li>
                <li :class="rmsg.length == 1?'psd-blink':''"><i v-if="rmsg.length > 1"></i></li>
                <li :class="rmsg.length == 2?'psd-blink':''"><i v-if="rmsg.length > 2"></i></li>
                <li :class="rmsg.length == 3?'psd-blink':''"><i v-if="rmsg.length > 3"></i></li>
                <li :class="rmsg.length == 4?'psd-blink':''"><i v-if="rmsg.length > 4"></i></li>
                <li :class="rmsg.length == 5?'psd-blink':''"><i v-if="rmsg.length > 5"></i></li>
            </ul>
        </div>
        <div class="regrist-button next" v-myclick="confirm" :class="{'regrist-button-active':rmsg}" style="margin-bottom:24px;margin-top: 94px;width: 100%;">确定设置</div>
    </div>
</div>
</body>
<script src="../../script/api.js"></script>
<script src="../../script/vue.js"></script>
<script src="../../script/app.js"></script>
<script src="../../jquery.base64.js" type="text/javascript"></script>
<script type="text/javascript" src="../../script/jquery.js"></script>
<script src="../../script/common.js"></script>
<script src="../../script/url.js"></script>
<script src="../../script/components.js"></script>
<script type="text/javascript" src="../../script/vant.min.js"></script>

<script>
    var vm,
    msg='',
    rmsg='',
    verify_code,
    user;
    apiready = function () {
        setBSImg();
        new Vue({
            el: '#blank'
        })
        var data = {
          member_id: getPrefs('member_id'),
          token:getPrefs('token'),
          wxOpenId:getPrefs('openid')
        };
        var callback = function (ret) {
            user = ret.content;
            console.log(JSON.stringify(user))
            initApp();
            // api.parseTapmode();
        };

        pinet.post(APIURLP+'/play/user/queryUserInfo', data, callback);
        api.parseTapmode();
    };

    function initApp() {
        // var isBigImg = Vue.BSImg == 'big';
        vm = new Vue({
            el: '#app',
            data: {
                value: '',
                msg:msg,
                rmsg:rmsg,
                msgLength:0,
                step:user.isPayWord==1?1:0,
                user:user,
                verify_code:verify_code,
                phone:user.inviteCode
            },
            computed: {

            },
            methods: {
                focus:function () {
                    this.$refs.pwd.focus();
                },
                rfocus:function () {
                    this.$refs.rpwd.focus();
                },
                onInput:function(key) {
                    this.value = (this.value + key).slice(0, 6);
                },
                onDelete:function() {
                    this.value = this.value.slice(0, this.value.length - 1);
                },
                next_step:function(){
                  if(this.step==0&&!this.verify_code){
                    alert('请输入验证码');
                    return;
                  }
                  if(this.step==1&&this.msg.length!=6){
                    alert('请输入六位密码');
                    return;
                  }
                  if(this.step==2&&this.rmsg.length<=0){
                    alert('请再次输入密码');
                    return;
                  }
                    this.step = this.step + 1;
                    console.log(this.step);
                },
                confirm:function(){
                   if(this.msg!= this.rmsg){
                     api.toast({
                         msg: '两次输入的密码不一致',
                         duration: 2000,
                         location: 'middle'
                     });
                     return;
                   }else{
                     //首次设置密码
                     if(user.isPayWord==1){
                       var data = {
                         payPw: this.msg,
                         token:getPrefs('token'),
                       };
                       var jsonData = JSON.stringify(data);
                       var base = new Base64();
                       var base64 = base.encode(JSON.stringify(data));
                       var params = {
                         jsonData:base64
                       }
                       var callback = function (ret) {
                         console.log(JSON.stringify(ret));
                         api.toast({
                             msg: '设置成功',
                             duration: 2000,
                             location: 'middle'
                         });

                         setTimeout(function (){closeWin()},"1000");

                       };

                       pinet.post(APIURLP+'/play/csm/upFirstPayCode', params, callback);
                     }else{
                       var data = {
                         payPw: this.msg,
                         upPayCode:this.verify_code,
                         token:getPrefs('token'),
                       };
                       var jsonData = JSON.stringify(data);
                       var base = new Base64();
                       var base64 = base.encode(JSON.stringify(data));
                       var params = {
                         jsonData:base64
                       }
                       var callback = function (ret) {
                         console.log(JSON.stringify(ret));
                         api.toast({
                             msg: '设置成功',
                             duration: 2000,
                             location: 'middle'
                         });

                         setTimeout(function (){closeWin()},"1000");

                       };

                       pinet.post(APIURLP+'/play/csm/upPayCode', params, callback);
                     }


                   }
                }

            },
            watch: {
                msg:function(curVal){
                    if(/[^\d]/g.test(curVal)){
                        this.msg = this.msg.replace(/[^\d]/g,'');
                    }else{
                        this.msgLength = curVal.length;
                    }
                },

            },
        })
    }


</script>

</html>
